<template>
    <div class="login_container">
        <!-- v-model是显示与隐藏 -->
        <el-dialog v-model="userStore.visible" title="用户登录">
            <!-- 对话框身体部分结构 -->
            <el-row>
                <!-- 左 -->
                <el-col :span="12">
                    <div class="login">
                        <div v-show="scene == 0">
                            <el-from :model="loginParam" :rules="rules">
                                <el-form-item prop="phone">
                                    <el-input placeholder="请你输入手机号码" :prefix-icon="User" v-model="loginParam.phone"
                                        </el-input>
                                </el-form-item>
                                <el-form-item prop="code">
                                    <el-input placeholder="请输入手机验证码" :prefix-icon="Lock"
                                        v-model="loginParam.code"></el-input>
                                </el-form-item>
                                <el-form-item>
                                    <el-button :disabled="!isPhone || flag ? true : false" @click="getCode">
                                        <CountDown v-if="flag" :flag="flag" @getFlag="getFlag" />
                                        <span v-else>获取验证码</span>
                                    </el-button>
                                </el-form-item>
                            </el-from>
                            <el-button style="width: 100%;" type="primary" size="default"
                                :disabled="!isPhone || loginParam.code.length < 6 ? true : false"
                                @click="login">用户登录</el-button>
                            <div class="bottom" @click="changeScene">
                                <p>微信扫码登录</p>
                                <svg t="1722323610387" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                    xmlns="http://www.w3.org/2000/svg" p-id="4511" width="32" height="32">
                                    <path
                                        d="M696.32 552.96c11.301926 0 20.48-9.178074 20.48-20.48 0-11.320889-9.178074-20.48-20.48-20.48s-20.48 9.178074-20.48 20.48S685.018074 552.96 696.32 552.96zM573.44 552.96c11.301926 0 20.48-9.178074 20.48-20.48 0-11.320889-9.178074-20.48-20.48-20.48s-20.48 9.178074-20.48 20.48S562.138074 552.96 573.44 552.96zM501.76 409.6c16.952889 0 30.72-13.748148 30.72-30.72s-13.767111-30.72-30.72-30.72c-16.952889 0-30.72 13.748148-30.72 30.72C471.04 395.851852 484.807111 409.6 501.76 409.6zM337.92 409.6c16.952889 0 30.72-13.748148 30.72-30.72s-13.767111-30.72-30.72-30.72c-16.952889 0-30.72 13.748148-30.72 30.72C307.2 395.851852 320.967111 409.6 337.92 409.6zM512 1024c282.775704 0 512-229.224296 512-512S794.775704 0 512 0 0 229.224296 0 512 229.224296 1024 512 1024zM451.716741 610.986667c-10.353778 1.441185-21.010963 2.180741-31.857778 2.180741-27.154963 0-53.020444-4.664889-76.515556-13.103407-2.332444-0.83437-10.695111-3.356444-15.208296 0-10.164148 7.547259-23.798519 23.248593-23.798519 23.248593s5.006222-11.415704 6.674963-28.103111c0.758519-7.623111-10.865778-12.970667-13.198222-14.52563-44.240593-29.923556-72.533333-79.36-72.533333-130.730667 0-90.149926 87.096889-163.233185 194.56-163.233185 100.333037 0 182.916741 63.696593 193.422222 145.521778-92.311704 12.743111-162.721185 79.928889-162.721185 160.919704C450.56 599.191704 450.939259 605.127111 451.716741 610.986667zM462.468741 649.500444c-13.824 2.180741-28.084148 3.318519-42.628741 3.318519-29.070222 0-56.869926-4.551111-82.583704-12.856889-12.932741-4.171852-60.150519 45.264593-71.888593 39.272296-6.97837-3.565037 21.086815-62.027852 14.601481-66.180741-58.04563-37.072593-95.668148-96.616296-95.668148-163.764148 0-112.412444 105.453037-203.529481 235.52-203.529481 122.652444 0 223.402667 81.009778 234.496 184.490667 103.177481 4.039111 185.344 75.434667 185.344 162.910815 0 54.328889-31.687111 102.437926-80.421926 132.096-9.178074 5.575111 19.892148 52.641185 9.576296 56.832-6.33363 2.578963-51.693037-37.262222-58.405926-35.252148-20.423111 6.106074-42.401185 9.424593-65.308444 9.424593C561.284741 756.242963 489.832296 711.793778 462.468741 649.500444z"
                                        fill="#33CC00" p-id="4512"></path>
                                </svg>
                            </div>
                        </div>
                        <div class="webchat" v-show="scene == 1">
                            <!-- 在这个容器中显示微信扫码 -->
                            <div id="login_container"></div>
                            <div class="phone" @click="handler">
                                <p>手机短信验证码登录</p>
                                <svg t="1722433682850" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                    xmlns="http://www.w3.org/2000/svg" p-id="6128" width="32" height="32">
                                    <path d="M512.1 512.4m-448 0a448 448 0 1 0 896 0 448 448 0 1 0-896 0Z"
                                        fill="#BF67E8" p-id="6129"></path>
                                    <path
                                        d="M619.9 796.8H404.2c-23.8 0-43.3-19.5-43.3-43.3V271.2c0-23.8 19.5-43.3 43.3-43.3h215.7c23.8 0 43.3 19.5 43.3 43.3v482.3c0 23.9-19.5 43.3-43.3 43.3z"
                                        fill="#FFFFFF" p-id="6130"></path>
                                    <path
                                        d="M623.2 734H401c-7.7 0-13.9-6.2-13.9-13.9V304.7c0-7.7 6.2-13.9 13.9-13.9h222.2c7.7 0 13.9 6.2 13.9 13.9v415.4c0 7.7-6.2 13.9-13.9 13.9z"
                                        fill="#BF67E8" p-id="6131"></path>
                                    <path d="M512.1 765.8m-15.8 0a15.8 15.8 0 1 0 31.6 0 15.8 15.8 0 1 0-31.6 0Z"
                                        fill="#BF67E8" p-id="6132"></path>
                                    <path
                                        d="M550.2 474.4c1-0.5 1.4-1.7 0.9-2.7-1.4-3.3-5.7-9.5-17.3-9.5-15.8 0-21.6 5.7-21.6 5.7s-4.1-5.7-21.6-5.7-25.1 23.5-21.3 42.3c4.1 20.2 17.5 39.6 25.9 39.6s10.9-4.6 18-4.6 12.3 4.6 18.3 4.6 13.1-5.2 18-13.4c3.4-5.7 5.3-11.5 6.1-14.6 0.3-1.1-0.3-2.2-1.4-2.6-4.1-1.3-13.1-5.6-13.1-19.2 0.1-13.1 6.2-18.2 9.1-19.9zM532.4 435.2c1.6-0.3 3.1 1 3 2.6-0.3 3.8-1.4 10.3-5.6 15.1-4.2 4.8-10.5 6.8-14.2 7.6-1.6 0.3-3.1-1-3-2.6 0.3-3.8 1.4-10.3 5.6-15.1 4.2-4.9 10.5-6.8 14.2-7.6z"
                                        fill="#BF67E8" p-id="6133"></path>
                                    <path
                                        d="M522.8 263.5H473c-2.5 0-4.5-2-4.5-4.5s2-4.5 4.5-4.5h49.8c2.5 0 4.5 2 4.5 4.5s-2 4.5-4.5 4.5z"
                                        fill="#BF67E8" p-id="6134"></path>
                                    <path d="M548.1 259.5m-5 0a5 5 0 1 0 10 0 5 5 0 1 0-10 0Z" fill="#BF67E8"
                                        p-id="6135"></path>
                                </svg>
                            </div>
                        </div>
                    </div>
                </el-col>
                <!-- 右 -->
                <el-col :span="12">
                    <div class="rightContent">
                        <div class="top">
                            <div class="item">
                                <img src="../../assets/images/code_login_wechat.png" alt="">
                                <svg t="1722323840872" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                    xmlns="http://www.w3.org/2000/svg" p-id="4786" width="16" height="16">
                                    <path
                                        d="M696.32 552.96c11.301926 0 20.48-9.178074 20.48-20.48 0-11.320889-9.178074-20.48-20.48-20.48s-20.48 9.178074-20.48 20.48S685.018074 552.96 696.32 552.96zM573.44 552.96c11.301926 0 20.48-9.178074 20.48-20.48 0-11.320889-9.178074-20.48-20.48-20.48s-20.48 9.178074-20.48 20.48S562.138074 552.96 573.44 552.96zM501.76 409.6c16.952889 0 30.72-13.748148 30.72-30.72s-13.767111-30.72-30.72-30.72c-16.952889 0-30.72 13.748148-30.72 30.72C471.04 395.851852 484.807111 409.6 501.76 409.6zM337.92 409.6c16.952889 0 30.72-13.748148 30.72-30.72s-13.767111-30.72-30.72-30.72c-16.952889 0-30.72 13.748148-30.72 30.72C307.2 395.851852 320.967111 409.6 337.92 409.6zM512 1024c282.775704 0 512-229.224296 512-512S794.775704 0 512 0 0 229.224296 0 512 229.224296 1024 512 1024zM451.716741 610.986667c-10.353778 1.441185-21.010963 2.180741-31.857778 2.180741-27.154963 0-53.020444-4.664889-76.515556-13.103407-2.332444-0.83437-10.695111-3.356444-15.208296 0-10.164148 7.547259-23.798519 23.248593-23.798519 23.248593s5.006222-11.415704 6.674963-28.103111c0.758519-7.623111-10.865778-12.970667-13.198222-14.52563-44.240593-29.923556-72.533333-79.36-72.533333-130.730667 0-90.149926 87.096889-163.233185 194.56-163.233185 100.333037 0 182.916741 63.696593 193.422222 145.521778-92.311704 12.743111-162.721185 79.928889-162.721185 160.919704C450.56 599.191704 450.939259 605.127111 451.716741 610.986667zM462.468741 649.500444c-13.824 2.180741-28.084148 3.318519-42.628741 3.318519-29.070222 0-56.869926-4.551111-82.583704-12.856889-12.932741-4.171852-60.150519 45.264593-71.888593 39.272296-6.97837-3.565037 21.086815-62.027852 14.601481-66.180741-58.04563-37.072593-95.668148-96.616296-95.668148-163.764148 0-112.412444 105.453037-203.529481 235.52-203.529481 122.652444 0 223.402667 81.009778 234.496 184.490667 103.177481 4.039111 185.344 75.434667 185.344 162.910815 0 54.328889-31.687111 102.437926-80.421926 132.096-9.178074 5.575111 19.892148 52.641185 9.576296 56.832-6.33363 2.578963-51.693037-37.262222-58.405926-35.252148-20.423111 6.106074-42.401185 9.424593-65.308444 9.424593C561.284741 756.242963 489.832296 711.793778 462.468741 649.500444z"
                                        fill="#dbdbdb" p-id="4787"></path>
                                </svg>
                                <p>微信扫一扫关注</p>
                                <p>快速预约挂号</p>
                            </div>
                            <div class="item">
                                <img src="../../assets/images/code_app.png" alt="">
                                <svg t="1722323966421" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                    xmlns="http://www.w3.org/2000/svg" p-id="6021" width="16" height="16">
                                    <path
                                        d="M820.409449 797.228346q0 25.19685-10.07874 46.866142t-27.716535 38.299213-41.322835 26.204724-50.897638 9.574803l-357.795276 0q-27.212598 0-50.897638-9.574803t-41.322835-26.204724-27.716535-38.299213-10.07874-46.866142l0-675.275591q0-25.19685 10.07874-47.370079t27.716535-38.80315 41.322835-26.204724 50.897638-9.574803l357.795276 0q27.212598 0 50.897638 9.574803t41.322835 26.204724 27.716535 38.80315 10.07874 47.370079l0 675.275591zM738.771654 170.330709l-455.559055 0 0 577.511811 455.559055 0 0-577.511811zM510.992126 776.062992q-21.165354 0-36.787402 15.11811t-15.622047 37.291339q0 21.165354 15.622047 36.787402t36.787402 15.622047q22.173228 0 37.291339-15.622047t15.11811-36.787402q0-22.173228-15.11811-37.291339t-37.291339-15.11811zM591.622047 84.661417q0-8.062992-5.03937-12.598425t-11.086614-4.535433l-128 0q-5.03937 0-10.582677 4.535433t-5.543307 12.598425 5.03937 12.598425 11.086614 4.535433l128 0q6.047244 0 11.086614-4.535433t5.03937-12.598425z"
                                        p-id="6022" fill="#dbdbdb"></path>
                                </svg>
                                <p>扫一扫下载</p>
                                <p>预约挂号app</p>
                            </div>
                        </div>
                        <p class="tip">尚医通官方指定平台</p>
                        <p class="tip">快速挂号，安全放心</p>
                    </div>
                </el-col>
            </el-row>
            <template #footer>
                <el-button type="primary" size="default" @click="closeDialog">关闭窗口</el-button>
            </template>
        </el-dialog>
    </div>
</template>

<script setup lang='ts' name="Login">
import { useRoute, useRouter } from "vue-router"
import { User, Lock } from '@element-plus/icons-vue'
//获取user仓库的数据
import useUserStore from '@/store/modules/user'
//引入wx扫码登陆参数请求
import { reqWxLogin } from '@/api/hospital/index'
import { ref, reactive, computed, watch } from 'vue'
//引入倒计时组件
import CountDown from '../countdown/index.vue'
import { ElMessage } from "element-plus";
let scene = ref<number>(0)//0代表手机号登录，1代表微信扫码登录
//定义一个响应式数据控制倒计时组件显示与隐藏
let flag = ref<boolean>(false)
let userStore = useUserStore();
let $route = useRoute();
let $router = useRouter();
//手机表单数据--手机号
let loginParam = reactive({
    phone: '',//收集手机号
    code: ''//收集验证码
})
//计算当前表单元素收集的内容是否是手机号码格式
let isPhone = computed(() => {
    //手机号码的正则表达式
    const reg = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/
    //返回布尔值：真代表手机号码，假代表不是
    return reg.test(loginParam.phone)
})
//点击微信扫码登录|微信小图标切换为微信登录
const changeScene = () => {
    scene.value = 1;
    //发请求获取微信扫码二维码需要参数
    let redirect_URL = encodeURIComponent(window.location.origin + '/wxlogin')
    let result: any = reqWxLogin(redirect_URL);
    result.then((value: any) => {
        //生产微信登录的二维码
        //@ts-ignore
        new WxLogin({
            self_redirect: true,//true：手机点击确认登录后可以在 iframe 内跳转到 redirect_uri
            id: "login_container",//显示二维码容器
            appid: value.data.data.appid,//应用位置标识appid
            scope: "snsapi_login",//当前微信扫码登录页面已经授权
            redirect_uri: value.data.data.redirectUri,//就是用户授权成功后
            state: value.data.data.state,//填写授权回调域路径,就是用户授权成功以后，微信服务器向公司后台推送code地址
            style: "black",
            href: ""
        });
    })
}
//获取验证吗码按钮的回调
const getCode = () => {
    //开启倒计时模式
    flag.value = true;
    //通知pinia仓库存储验证码
    try {
        //代表获取验证码成功
        userStore.getCode(loginParam.phone);
        loginParam.code = userStore.code
    } catch (error) {
        //获取验证码失败
        ElMessage({
            type: 'error',
            message: (error as Error).message
        })
    }
}
//计数器子组件绑定的自定义事件
//当倒计时为0，通知父组件将子组件隐藏 
const getFlag = (value: boolean) => {
    flag.value = value
}
//点击用户登录按钮回调
const login = async () => {
    //登录请求成功：顶部组件需要展示用户名字，对话框关闭
    //登录请求失败：弹出对应的错误信息
    try {
        //用户登陆成功
        await userStore.userLogin(loginParam)
        //关闭对话框
        userStore.visible = false
        let redirect = $route.query.redirect;
        if(redirect){
            $router.push(redirect as string)
        }else{
            $router.push('/home')
        }
    } catch (error) {
        ElMessage({
            type: 'error',
            message: (error as Error).message
        })
    }
}
//自定义校验规则:手机号码自定义校验规则
const validatorPhone = (rule: any, value: any, callBack: any) => {
    //rule:即为表单校验规则对象
    //value:即为当前文本的内容
    //callBack:回调函数
    const reg = /^1((34[0-8])|(8\d{2})|(([35][0-35-9]|4[579]|66|7[35678]|9[1389])\d{1}))\d{7}$/;
    if (reg.test(value)) {
        callBack();
    } else {
        callBack(new Error("请输入正确的手机号码格式"));
    }
};
//验证码自定义校验规则
const validatorCode = (rule: any, value: any, callBack: any) => {
    //rule:即为表单校验规则对象
    //value:即为当前文本的内容
    //callBack:回调函数
    if (/^\d{6}$/.test(value)) {
        callBack();
    } else {
        callBack(new Error("请输入正确的验证码格式"));
    }
};
//表单校验的规则对象
const rules = {
    //手机号码校验规则
    //required:代表当前字段务必进行校验
    //message:代表的校验错误的提示信息
    //trigger:代表表单校验触发的时机  change:文本发生变化的时候进行校验  blur:失却焦点的时候触发校验
    //min:代表的是最小位数
    //max:代表的是最大的位置
    phone: [{ required: true, message: "手机号码务必11位", trigger: "change", min: 11 }],
    code: [{ required: true, message: "验证码务必6位", trigger: "blur", min: 6 }],

    // phone: [{ trigger: "change", validator: validatorPhone }],
    // code: [{ trigger: "change", validator: validatorCode }],
};
//关闭窗口按钮的回调
const closeDialog = () => {
    userStore.visible = false
}
//点击手机短信验证码盒子回调
const handler = () => {
    scene.value = 0
}
//监听场景的数值
watch(() => scene.value, (val: number) => {
    if (val === 1) {
        userStore.queryState();
    }

})                                                              
</script>

<style scoped lang="scss">
.login_container {

    ::v-deep(.el-dialog__body) {
        border-top: 1px solid #ccc;
        border-bottom: 1px solid #ccc;
    }

    .login {
        padding: 20px;
        border: 1px solid #ccc;
        margin-top: 30px;
        margin-bottom: 100px;

        .bottom {
            display: flex;
            flex-direction: column;
            align-items: center;

            p {
                margin: 10px 0;
            }
        }

        .webchat {
            display: flex;
            flex-direction: column;
            align-items: center;

            .phone {
                display: flex;
                flex-direction: column;
                align-items: center;

                p {
                    margin: 10px 0;
                }
            }
        }
    }

    .rightContent {
        margin-top: 30px;
        margin-bottom: 100px;

        .top {
            display: flex;
            justify-content: space-around;

            .item {
                display: flex;
                flex-direction: column;
                align-items: center;

                img {
                    width: 130px;
                    height: 130px;
                }

                p {
                    margin: 5px 0;
                }
            }
        }

        .tip {
            text-align: center;
            margin: 20px 0;
            font-size: 20px;
            font-weight: 900;
        }
    }
}
</style>